<template>
  <div class="select-warp" :style="{ background }" :class="showWhite ? 'whiteBk' : ''">
    <div
      class="select-item"
      v-for="(item, index) in options"
      :key="index"
      :style="{ width: 100 / options.length + '%' }"
      :class="selectedIndex === index ? 'active' : ''"
      @click="changeIndex(index)"
    >
      {{ item }}
    </div>
    <div
      class="active-item"
      :style="{
        width: 100 / options.length + '%',
        left: (100 / options.length) * selectedIndex + '%',
        background: activeBackground,
      }"
    ></div>
  </div>
</template>

<script>
export default {
  name:"SelectComponent",
  props: {
    selectedIndex: {
      type: Number,
      default: 0,
      required: true,
    },
    options: {
      type: Array,
      default: function (){
        return []
      },
      required: true,
    },
    background: {
      type: String,
      default: '#434850',
    },
    activeBackground: {
      type: String,
      default: '#409EFF',
    },
  },
  computed: {
    showWhite: function () {
      return this.options[this.selectedIndex] === 'OFF'
    },
  },
  methods: {
    changeIndex(index) {
      this.$emit('changeIndex', index)
    },
  },
}
</script>

<style scoped lang="scss">
.select-warp {
  cursor: pointer;
  caret-color: transparent; /*去除鼠标光标*/

  width: 100%;
  min-height: 35px;
  display: flex;
  border-radius: 6px;
  position: relative;
  padding: 3px 0px;
  box-sizing: border-box;

  .select-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    color: #3d3d3d;
    line-height: 20px;
    z-index: 10;
  }
  .active-item {
    height: 29px;
    position: absolute;
    left: 5px;
    border-radius: 6px;
  }
  .active {
    //color: #3d3d3d;
    color: #ffffff;

  }
}
.whiteBk {
  .active-item {
    margin: 0 10px;
    background: #EEEEEE;
  }
  .active {
    //color: #d7d8da;
    color: #000;

  }
}
</style>
